<template>
  <div class="login">
    <div class="login_menu">
      <div>
        <p class="login_title">天王盖地虎</p>
      </div>
      <el-form
        ref="loginRef"
        :model="login"
        center
        :rules="loginRules"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="手机号:" prop="phone">
          <el-input
            v-model="login.phone"
            autocomplete="off"
            label-width="100px"
            placeholder="请输入手机号"
            maxlength="11"
          />
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            v-model="login.password"
            autocomplete="off"
            type="password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="验证码:" prop="code">
          <el-input
            v-model="login.code"
            size="40px"
            autocomplete="off"
            placeholder="请输入验证码"
            style="width: 200px"
          />
          <el-button
            type="primary"
            style="flex:1;margin-left:10px; "
            >获取验证码</el-button
          >
        </el-form-item>

        <el-button
          style="width: 340px; height: 40px; margin-left: 60px; font-size: 18px"
          type="primary"
          @click="submitForm(loginRef)"
          >登录</el-button
        >

        <div
          style="
            display: flex;
            font-size: 16px;
            margin: 10px 0 0 60px;
            justify-content: space-between;
          "
        >
          <span
            @click="forgetPw()"
            style="color: #adadad; cursor: pointer; alt: "
            >忘记密码？</span
          >
          <el-button
            style="color: blue; font-size: 16px"
            text
            @click="dialogleft = true"
          >
            去注册账号
          </el-button>
          <el-dialog
            v-model="dialogleft"
            title="注册账号"
            :close-on-click-modal="false"
            width="30%"
          >
            <div style="text-align: center">
              <el-button type="primary" round
                ><router-link to="/persionRegister" style="color: white"
                  >个人注册
                </router-link></el-button
              >
              <el-button type="primary" round
                ><router-link to="/enterpriseRegister" style="color: white"
                  >企业注册</router-link
                >
              </el-button>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <span text @click="dialogleft = false">去登录</span>
              </span>
            </template>
          </el-dialog>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { userLogin } from "@/api/userRegister";
import { displayBoxInfo } from "@/utils/msg";
import { ElMessage } from "element-plus";
import router from "@/router";
import { md5 } from 'js-md5'; // 引
export default {
  name: "login",
  setup() {
    let data = reactive({
      dialogleft: false,
      loginRef: "",
      login: {
        phone: "",
        password: "",
        code: "",
      },
      loginRules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "手机号码有误",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern: /^\S{6,}$/, message: "密码不能小于6位", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码" }],
      },
    });

    //用户登录的兜底校验
    let submitForm =  (formEl) => {
      if (!formEl) return;
       formEl.validate( (valid, fields) => {
        if (valid) {
          var md5Password=md5(data.login.password + data.login.phone)
          let params={
            phone:data.login.phone,
            password:md5Password,
            code:data.login.code,
          }
          userLogin(params).then((res) => {
            displayBoxInfo(res.code,res.msg)
            if (res.code == 1) {
              localStorage.setItem("userInfo",JSON.stringify(res.data.user))
              localStorage.setItem("token",res.data.token)
              router.push({path:"/main"});
            }
          });
        } else {
          console.log("error submit!", fields);
        }
      });
    };

    const forgetPw = () => {
      router.push({ name: "resetPw" });
    };
    return {
      ...toRefs(data),
      submitForm,
      forgetPw,
    };
  },
};
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  height: 100%;
  margin-top: 10%;
}

.login_menu {
  border: 1px solid #909399;
  height: 300px;
  width: 400px;
  background-color: #fff;
  padding: 40px 40px 100px 40px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
.login_title {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  padding: 30px 0 50px 0;
  font-style: normal;
}

.el-form-item >>> .el-form-item__error {
  font-size: 14px !important;
}
</style>